<template>
	<view class="guide-register-wrapper bg-primary full relative box flex column">
		<view class="relative flex-1 box w-100">
			<view class="absolute inset">
				<scroll-view class="full scroll-view" scroll-y>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>店铺名称</text>
						</view>
						<view class="phone-wrap">
							<input v-model="shopName" type="text" placeholder="请输入店铺名称" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>联系人</text>
						</view>
						<view class="phone-wrap">
							<input v-model="username" type="text" placeholder="请输入联系人姓名" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>手机号</text>
						</view>
						<view class="phone-wrap">
							<input v-model="mobile" type="tel" placeholder="请输入您的手机号" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>您的地址</text>
						</view>
						<view class="phone-wrap">
							<input v-model="shopAddress" type="text" placeholder="请输入店铺地址" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-image feedback-common">
						<view class="header">
							<text>上传图片</text>
						</view>
						<view class="feedback-tip">
							<text>营业执照</text>
						</view>
						<view class="upload-list">
							<view @click="chooseImage">
								<view class="image-item" v-if="showImage">
									<image class="full" mode="aspectFill" :src="image"></image>
								</view>
								<view class="upload-btn" v-else>
									<image src="../static/upload-icon.png" class="upload-icon" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="confirm-btn">
			<u-button :loading="loading" @click="confirmHandle" type="primary" text="提交申请" />
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/utils/tool.js'
	export default {
		methods: {
			resetForm() {
				this.mobile = ''
				this.username = ''
				this.image = ''
				this.shopName = ''
				this.shopAddress = ''
			},
			async confirmHandle() {
				if (this.loading) return
				const payload = this.validate()
				if (!payload) return
				this.loading = true
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				const resp = await this.$request({
					url: '/BusinessLicense/addBusinessLicense',
					data: payload,
				})
				await this.$delay(300)
				const { code, msg } = resp
				uni.hideLoading()
				this.loading = false
				this.$toast({ title: msg })
				if (code !== 1) return
				this.resetForm()
			},
			validate() {
				const { shopName, shopAddress, showImage, image, username, mobile, } = this
				if (!shopName.length) return this.$toast({ title: "请输入店铺名称" })
				if (!username.length) return this.$toast({ title: '请输入您的姓名' })
				if (!mobile.length) return this.$toast({ title: "请输入您的联系方式" })
				if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: "请输入正确的联系方式" })
				if (!shopAddress.length) return this.$toast({ title: '请填写店铺地址' })
				if (!showImage) return this.$toast({ title: '请上传营业执照' })
				return {
					title: shopName,
					name: username,
					image,
					tel: mobile,
					addr: shopAddress,
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: async ev => {
						const { tempFilePaths } = ev
						if (!tempFilePaths.length) return
						const [file] = tempFilePaths
						const [error, resp] = await uploadFile(file)
						if (error) {
							return this.$toast({ title: "上传失败,请重试" })
						}
						const { uri } = resp
						this.image = uri
					}
				})
			},
		},
		computed: {
			showImage() {
				const { image } = this
				return !!(image.length)
			},
		},
		data() {
			return {
				shopName: '',
				shopAddress: '',
				loading: false,
				image: '',
				username: '',
				max: 500,
				mobile: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guide-register-wrapper {
		padding: 0 0 env(safe-area-inset-bottom);

		.scroll-view {
			padding-top: 24rpx;
			box-sizing: border-box;
		}

		.confirm-btn {
			margin-top: 24rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			::v-deep button {
				height: 80rpx;
				background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: none;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);

			}
		}

		.feedback-phone {
			margin-top: 16rpx;

			.phone-wrap {
				margin-top: 24rpx;

				.mobile-input {
					display: block;
					width: 100%;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.26);
					border: 2rpx solid rgba(0, 0, 0, 0.26);
					padding: 10rpx 16rpx;
					box-sizing: border-box;
				}
			}
		}

		.feedback-image {
			margin-top: 16rpx;

			.upload-list {
				display: flex;
				align-items: center;
				flex-flow: row wrap;
				margin-top: 24rpx;

				.video-item {
					width: 320rpx;
					height: 300rpx;
				}

				.image-item {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 0;
					overflow: hidden;
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #F3F3F3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.upload-icon {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.feedback-tip {
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
				margin-top: 8rpx;
				line-height: 40rpx;
			}
		}

		.feedback-common {
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;

			.header {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.feedback-content {
			margin-top: 16rpx;
			position: relative;

			.textarea-wrap {
				margin-top: 50rpx;

				.textarea-footer {
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}

				.textarea {
					display: block;
					width: 100%;
					height: 192rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}
			}

			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 32rpx;
				right: 0;
				top: 94rpx;
				height: 1px;
				background-color: #E7E7E7;
			}

		}

		.feedback-type {

			.type-list {
				margin-top: 24rpx;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;

				.type-item {
					width: 132rpx;
					height: 60rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					overflow: hidden;

					&.active {
						background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
						color: rgba(0, 0, 0, 0.9);
						border-color: #8BDCFF;
					}
				}
			}
		}
	}
</style>